﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Navigation.aspx.cs" Inherits="BugSysSolution.XMLAndXSLT.Navigation" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Style/site.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        
        <div id="showcd" style="border: 1px solid red">
            点击某个 CD 就可显示专辑信息
        </div>
        <div id="showxml" style="border:1px solid black"></div>
    </form>
</body>
</html>
<script type="text/javascript">
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("get", "test.xml", false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    x = xmlDoc.getElementsByTagName("cd");

    function displayCDINFO(i) {
        artist = x[i].getElementsByTagName("artist")[0].childNodes[0].nodeValue;
        title = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
        year = x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue;
        country = x[i].getElementsByTagName("country")[0].childNodes[0].nodeValue;
        company = x[i].getElementsByTagName("company")[0].childNodes[0].nodeValue;
        price = x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;

        txt = "ARTIST:" + artist + "<br />TITLE:" + title + "<br/>YEAR:" + year + "<br/>COUNTRY:" + country + "<br/>COMPANY:" +
            company + "<br/>PRICE:" + price;
        document.getElementById("showcd").innerHTML = txt;
    }

    function load() {
        var html = "";
        html += "<table class='tab'>";
        for (var k = 0; k < x.length; k++) {
            html += "<tr onclick='displayCDINFO(" + k + ")' >";
            html += "<td>";
            html += x[k].getElementsByTagName("artist")[0].childNodes[0].nodeValue;
            html += "</td>";
            html += "<td>";
            html += x[k].getElementsByTagName("title")[0].childNodes[0].nodeValue;
            html += "</td>";
            html += "</tr>";
        }
        html += "</table>";
        document.getElementById("showxml").innerHTML = html;
    }

    load();
</script>
